﻿<body class="pear-container">
    <table id="socketclient"></table>
    <script type="text/html" id="inlinBar">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="debug">调试</a>
        </div>
    </script>
    <div id="debug-dialog" style="display:none">
        <table id="debuglog"></table>
    </div>
    <script>
        layui.use(function () {
            var table = layui.table;
            var $ = layui.$;
            table.render({
                elem: '#socketclient',
                page: false,
                url: '/api/data/list.socket.client',
                method: 'post',
                even: true,
                cols: [[
                    { field: 'id', title: '链接ID' },
                    { field: 'clientIP', title: '客户端IP' },
                    { field: 'clientPort', title: '客户端端口' },
                    { field: 'serverIP', title: '服务端IP' },
                    { field: 'serverPort', title: '服务端端口' },
                    { fixed: 'right', title: '操作', toolbar: '#inlinBar' }
                ]]
            });
            table.on('tool(socketclient)', function (obj) {
                var layEvent = obj.event;
                var rowData = obj.data;
                if (layEvent == 'debug') {
                    layer.closeAll();
                    var intervalId = 0;
                    var layerIndex = layer.open({
                        type: 1,
                        id: 'debug_layer',
                        area: ['50%', '100%'],
                        anim: 3,
                        resize: false,
                        shadeClose: true,
                        title: '数据调试',
                        offset: 'r',
                        content: $('#debug-dialog'),
                        success: function (layero, index, that) {
                            var debugTable = table.render({
                                    elem: '#debuglog',
                                    page: false,
                                    url: '/api/data/list.log.' + rowData.id,
                                    method: 'post',
                                    even: true,
                                    css: 'thead{display:none !important;}',
                                    cols: [[
                                        { field: 'value', title: '', style:'white-space:normal;word-break:break-all;height:auto' },
                                    ]]
                            });
                            intervalId = setInterval(function(){
                                debugTable.reloadData();
                            },5000);
                        },
                        end: function () {
                            clearInterval(intervalId);
                        }
                    });
                }
            });
        });
    </script>
</body>
